/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  CCell, Cell, Table, TableBody, TableRow, Text, useTheme,
} from "customize-easy-ui-component";
import {DirectLink, Link as RouterLink} from "../../routing/Link";
import {useFoldForList, useFoldGenerate, useSplitSubCapacity} from "../hook/useMainRepUrlOr";

//自带分项报告的模式：就没有配置模板编码的，更没有模板版本号。
//单线图打印 : 非结构化做得单向项关联/report/INDPL-DJ/ver/1/bUhCaur9RFyGAvt4VABCJVJlcG9ydA/#Characteristics0  特性表对象来保存关联配置
//【特别做法】 道单线图要独占一张打印纸，尽量居中，尽可能把表格撑大铺满一整张的A4纸张大小，图片尽量撑大；即使图片高度较小的，打印表格的高度应该把追表格末尾的审核人文本位置留到这张纸张的底部打印。
//【hook报错】rendered more hooks than during the previous render.只能改成正规的React.Component模式。不能直接用普通函数const 管道单线图= ({theme, orc, rep,title} :{theme: any, orc:any, rep:any,title:string} ) => {。
export const PipeLineDiagram= ({ orc, rep, children,title='单线图'} : { orc: any,rep: any,children?: React.ReactNode, title?:string}
) => {
  const theme= useTheme();
  const sizeDg=orc?.单图表?.length || 0;
  const lsBlockMax=useSplitSubCapacity(sizeDg,8);        //以8张图为一个折叠区组合的。 实际图序号计算 =折叠区序号 * 8 +偏移量。
  const {sumArea, areaContent, btnBindUses}=useFoldForList(orc?.单图表, lsBlockMax,false);
  const callback = (dlPage: any, arak:number, pid:number) => {
    const aIdx= arak * lsBlockMax + pid;      //在总体列表中的顺序号。
    return <div key={aIdx} css={{
        "@media not print": {
          marginTop: '1rem',
          marginBottom: '1rem'
        },
      }}>
        <div css={{
          "@media print": {
            height: '100vh',       //一张纸的高度！同时配合 pageBreakAfter: 'always', 来约束特定纸张大小；【图片】横竖90度翻转
            overflowY: 'hidden',     //【约束前提】内容整体不可能超过一张纸高度！ 只想打印一页的情形，纸张A4竖版的规格；假如实际的数据超出自然不打印的！ 不加上打印重叠的；
          }
        }}>
          <DirectLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/LineDiagram#LineDiagram`}>
            <Text  variant="h2" css={{
              textAlign: 'center', marginTop: '1rem',
              "@media print": {
                pageBreakBefore: 'always', marginTop: 'unset',
              },
            }}>{title}</Text>
          </DirectLink>
          <div css={{
            display: 'flex',
            justifyContent: 'space-between'
          }}>
            <Text>序号：{aIdx+1}</Text>
            <Text>报告编号：{rep.isp.no}</Text>
          </div>
          {/*这底下表格calc(100vh - 6rem)是扣除掉非表格外的高度，应该不会超过一张纸高度的，一张纸打印一个表格，让表格尾部尽量能接近纸张底部做法*/}
          <Table fixed={["62%", "%"]} css={{borderCollapse: 'collapse', "@media print": {minHeight: 'calc(100vh - 6rem)'}}} tight miniw={800}>
            <TableBody>
              <DirectLink
                  href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/LineDiagram?dxtix=` + aIdx + `#LineDiagram`}>
                <TableRow>
                  <Cell colSpan={2} css={{
                    "@media print": {
                      height: '-webkit-fill-available',     //固定高度 77vh?
                      pageBreakInside: 'avoid'
                    }, padding: 0,
                  }}>
                    <div css={{display: 'flex', justifyContent: 'space-around', alignItems: 'center',
                      "@media print": {marginTop: '1px', marginRight: '1px', marginBottom: '1px'},
                    }}>
                      {orc?.单图表?.[aIdx]?._FILE_?.url &&
                          <img src={process.env.REACT_APP_OSS_ENDP + orc?.单图表?.[aIdx]?._FILE_?.url}
                               alt={orc?.单图表?.[aIdx]?._FILE_?.url}
                               css={{
                                 maxHeight: '14cm',   //在这个元素的上一级元素可以自己加一个固定高度值，就像一张纸打印的应该多高的取值。这个用固定高度会导致图片自动的横竖比例不均衡压缩=会变形啊！24cm是纸张大约最多高度=报告最大图片高。
                                 maxWidth: '-webkit-fill-available',
                                 [theme.mediaQueries.lg]: {maxHeight: '18cm', maxWidth: undefined},           //普通图片+大屏幕限制高度才是关键的。
                                 //【很容易超过限制！！】A4纸规格21cm×29.7cm，扣除页眉页脚再扣除 tr td以及高度方向上的其它DOM：标题高度，其它tr行高。
                                 //打印css：需要在<td>上加height: 86vh盛满整张纸张后，能保证图片正常打印。 打印时: 小图片不会主动放大的。
                                 "@media print": {maxHeight: '86vh', maxWidth: '100%'},        //对A4纸张竖版的高度26cm基本都是图片整张纸，这里没考虑多个图片在宽度方向上的并排布局：可用软件合并。
                               }}
                          />
                      }
                    </div>
                  </Cell>
                </TableRow>
                <TableRow>
                  <CCell>
                    <div css={{
                      height: '100%',
                      display: 'flex',
                      justifyContent: 'space-between',
                      alignContent: 'space-between', alignItems: 'flex-start'
                    }}>
                      <div><Text>检验：</Text>&nbsp; {orc?.单图表?.[aIdx]?.sgm?.name}</div>
                      <div css={{textAlign: 'end'}}><Text>日期</Text>2022-12-31</div>
                    </div>
                  </CCell>
                  <CCell>
                    <div css={{
                      height: '100%',
                      display: 'flex',
                      justifyContent: 'space-between',
                      alignContent: 'space-between',
                      alignItems: 'flex-start'
                    }}>
                      <div><Text>审核：</Text></div>
                      <div css={{textAlign: 'end'}}><Text>日期</Text>2021-01-31</div>
                    </div>
                  </CCell>
                </TableRow>
              </DirectLink>
            </TableBody>
          </Table>
        </div>
        {/*这才是height:'100vh'的结束位置，底下另外一页纸张的，可能被上面这一页覆盖了，尾pageBreakAfter:'always'下页pageBreakBefore: 'always',也没法保证不重叠*/}
      </div>
  }
  const [renderAll]=useFoldGenerate({sumArea,btnBindUses,areaContent, callback,mark:'单线图折叠'});
  // if(sizeDg<=0)  return null;
  return <>
    {sizeDg <= 0 &&
        <RouterLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/LineDiagram#LineDiagram`}>
          <Text id='LineDiagram' variant="h2" css={{
            textAlign: 'center', marginTop: '1rem', "@media print": {display: 'none',},
          }}>管道单线图的上传</Text>
        </RouterLink>
    }
    <div id="PipeLineDiagram"/>
    {renderAll}
    <RouterLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/LineDiagram#LineDiagram`}>
      <Text  variant="h3" css={{
        textAlign: 'center', "@media print": {display: 'none',},
      }}>新增加管道单线图，序号加1</Text>
    </RouterLink>
  </>;
};


